import React from 'react';

export default class LifeCycle extends React.Component {

  // vue2
  // beforeCreate created beforeMount mounted beforeUpdate updated beforeDestory destoryed

  // setup
  constructor () {
    super();
    console.log(this.state?.count);
    // beforeCreate
    this.state = {
      count: 0,
    }
    // created
  }

  // readonly
  // state = {
  //   count: 0,
  // };

  // mounted
  componentDidMount () {
    console.log(document.querySelector('#a').innerHTML);
  }

  // updated
  componentDidUpdate () {
    console.log(document.querySelector('#a').innerHTML);
  }

  // beforeDestory
  componentWillUnmount () {

  }

  onAdd () {
    this.setState({
      count: this.state.count + 1,
    });
    this.sayHello();
  }

  sayHello () {
    console.log('hello');
  }

  // 渲染
  render () {
    // jsx语法
    return (
      <div id="a">
        { this.state.count }<br/>
        <button onClick={ this.onAdd.bind(this) }>+1</button>
      </div>
    );
  }

}
